<template>
  <div class="header_wrap_fix">
    <div class="df jcc" style="padding-top: 13px;"><div class="header_text">{{ title }}</div></div>
    <div class="time_left_pos">
      <div class="df aic">
        <span>{{ getTimeObj.year }}-{{ getTimeObj.month }}-{{ getTimeObj.day }}</span>
        <span class="ml15">{{ getTimeObj.hour }}:{{ getTimeObj.minute }}:{{ getTimeObj.second }}</span>
        <span class="ml15">{{ getTimeObj.week}}</span>
      </div>
    </div>
    <div class="form_right_pos df aic">
      <div class="w102">
        <select name="" id="" class="select_01">
          <option value="0">2024</option>
          <option value="1">2023</option>
          <option value="2">2022</option>
          <option value="3">2021</option>
        </select>
      </div>
      <div class="w102 ml10">
        <select name="" id="" class="select_01">
          <option value="0">2024</option>
          <option value="1">2023</option>
          <option value="2">2022</option>
          <option value="3">2021</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref, reactive, onBeforeUnmount } from 'vue';
const timer = ref(null);
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  }
});

const getTimeObj = reactive({
  year: null,
  month: null,
  day: null,
  hour: null,
  minute: null,
  second: null,
  week: null
});

onBeforeUnmount(() => {
  stopTimer();
});

const startTimer = () => {
  timer.value = setInterval(() => {
    updateCurrentTime();
  }, 1000);
};

startTimer();

const stopTimer = () => {
  clearInterval(timer.value);
};

const updateCurrentTime = () => {
  const now = new Date();
  getTimeObj.year = now.getFullYear();
  getTimeObj.month = String(now.getMonth() + 1).padStart(2, '0');
  getTimeObj.day = String(now.getDate()).padStart(2, '0');
  getTimeObj.hour = String(now.getHours()).padStart(2, '0');
  getTimeObj.minute = String(now.getMinutes()).padStart(2, '0');
  getTimeObj.second = String(now.getSeconds()).padStart(2, '0');
  getTimeObj.week = getWeekday(now);
};

const getWeekday = (date) => {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  return weekdays[date.getDay()];
}

</script>

<style lang="scss" scoped>
.header_wrap_fix {
  position: relative;
  width: 100%;
  height: 74px;
  background: url(@/assets/images/dataCenter/icon_header_bg.png) no-repeat;
  background-size: 100%;
  z-index: 3;
  .header_text {
    position: relative;
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    background: linear-gradient(180deg, #FFFFFF 47%, #76D3FF 57%, #76D3FF 100%);
    -webkit-background-clip: text;  
    background-clip: text;  
    font-family: HONORSans;
    color: transparent; 
  }
  .tac { text-align: center; }
  .title_img {
    height: 45px;
  }
  .time_left_pos {
    position: absolute;
    top: 12px;
    left: 26px;
    font-size: 18px;
    color: #fff;
  }
  .form_right_pos {
    position: absolute;
    top: 12px;
    right: 26px;
    z-index: 2;
    .w102 { width: 102px; }
    .select_01 {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 30px;
      line-height: 28px;
      text-align: left;
      font-size: 16px;
      color: #fff;
      border: 1px solid #2A80B7;
      background: transparent;
      border-radius: 3px;
      outline: none;
    }
  }
}

</style>